<template>
  <div class="dashboard-container">
    <div style="color: #46d3e8;margin-bottom: -50px;font-family: Algerian,serif"><center><p>若兮开发团队</p></center></div>
    <h1 align="center"><img src="https://ruoqing-img.oss-cn-chengdu.aliyuncs.com/admin_img/95-eryaqinghuakaiti-247.png"></h1>
    <div style="margin-top: -50px;font-family: 'Segoe UI Semilight',serif;color: #409eff;font-size: 30px" align="center">钱塘江上潮信来,今日方知我是我。</div>
    <div style="margin-top:10px;font-size: 23px;font-family: 'Segoe UI Semilight',serif" class="dashboard-text" align="center">管理员 : <el-tag style="font-size: 23px" type="warning">{{ username }}</el-tag></div>
    <center>
    <el-tooltip v-for="(value, key) in roleMap" :key="key" class="item" effect="dark" placement="right">
      <div slot="content">{{value}}</div>
      <el-button type="danger" plain>{{key}}</el-button>
     </el-tooltip>
    </center>
    <div>
      <el-calendar v-model="value" style="width: 800px;height: 400px;margin-left: 110px">
      </el-calendar>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
	data(){
		return {
			value: new Date(),
      username: '',
      role: '',
			description: '',
      roleMap: new Map()
		}
	},
  created(){
  	this.username = JSON.parse(sessionStorage.getItem('username')).authUser.username
    this.role = JSON.parse(sessionStorage.getItem('username')).userRole
    this.description = JSON.parse(sessionStorage.getItem('username')).roleDescription
    this.roleMap = JSON.parse(sessionStorage.getItem('username')).roleMap
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
    margin-top: 50px;
    color: #ffa38c;
  }
}
</style>
